<script lang="ts" setup>
// @ts-ignore
import {getUserInfoById} from "~/server/userAuth.service";
// @ts-ignore
import image1 from '@/assets/user-center/1.png'
// @ts-ignore
import image2 from '@/assets/user-center/2.png'
// @ts-ignore
import image3 from '@/assets/user-center/3.png'
// @ts-ignore
import image4 from '@/assets/user-center/4.png'
// @ts-ignore
import {auth} from "~/service/auth.service";
// @ts-ignore
import {Message} from "@arco-design/web-vue";

const route = useRoute()
const info = ref({} as any)
const userStore = useUserStore()
const userInfo = computed(()=>{
    return userStore.userInfo
})
function getUserInfo() {
    getUserInfoById(route.params.id).then(({data}: any) => {
        if (data.flag){
            info.value = data.data
        }
    })
}

function popLogin() {
    auth.login()
}
onMounted(() => {
    getUserInfo()
})
</script>
<template>
    <header class="user-center-header">
        <div class="site-user-bg"></div>
    </header>
    <section class="user-center-info">
        <CardBox>
            <div class="user-center-meta user-avatar-box">
                <div class="user-heading block">
                    <div class="user-meta">
                        <div class="user-center-avatar">
                            <img :alt="info.nickname"
                                 :src="info.avatar"
                                 class="user-center-avatar-url"
                                 height="100" width="100"
                                 @error="handleErrorFriendAvatar($event,String(info.nickname).charAt(0),'27B3BC')">
                        </div>
                        <div class="user-meta-info">
                            星球名称:<span class="plate-name">{{ info.nickname }}</span>
                        </div>
                        <div class="user-meta-id">
                            星球编号:<span class="plate-id">{{ $route.params.id }}</span>
                        </div>
                    </div>
                    <div class="user-center-card">
                        <div class="user-center-card-post"></div>
                        <div class="user-center-card-inner">
                            <div class="user-center-card-desc">热爱你来过的每度温暖</div>
                            <template v-if="userInfo === ''">
                                <a href="javascript:" class="user-center-card-btn" @click="popLogin">立即登录</a>
                            </template>
                            <template v-else>
                                <a href="/user/profile" class="user-center-card-btn profile">资料修改</a>
                            </template>
                            <div class="user-center-card-icon"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-center-meta">
                <div class="user-center-meta-right">
                    <UserCenterItem :image="image1" :title="'昵称'" :desc="info.nickname"/>
                    <UserCenterItem :image="image2" :title="'网站'" :desc="info.website"/>
                    <UserCenterItem :image="image3" :title="'编号'" :desc="info.id"/>
                    <UserCenterItem :image="image4" :title="'座右铭'" :desc="info.intro"/>
                </div>
            </div>
        </CardBox>
    </section>
</template>
<style scoped>
.user-center-header {
    padding: var(--edge-tb) 0 0;
}

.site-user-bg {
    height: calc(60vh - var(--edge-tb));
    background-image: url("@/assets/user-center/user.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 15%;
}

.user-center-info {
    --fqxk-x: 1rem;
    --fqxk-y: 1rem;
    padding: var(--edge-lr) var(--edge-lr) 0;
}

.user-center-meta {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 50%;
}

.user-heading {
    padding: 1rem 1rem 0;
    margin: 0 0 4rem;
}

.user-avatar-box .block {
    background: linear-gradient(180deg, #f0f2f7, #fff);
    border: 2px solid #fff;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 10%), -6px -6px 15px 0 #fff;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.user-meta {
    position: relative;
    display: flex;
    align-items: center;
}

.user-center-avatar {
    width: 4.5rem;
    height: 4.5rem;
    position: relative;
    line-height: 1;
    white-space: nowrap;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}

.user-center-avatar img.user-center-avatar-url {
    width: inherit;
    object-fit: cover;
    border-radius: inherit;
}

.user-meta-info {
    flex: 1 1 auto;
    margin-right: 1rem;
    margin-left: 1rem;
}

.user-meta-info, .user-meta-id {
    font-weight: bold;
    font-size: 1rem;
}

.plate-name, .plate-id {
    color: #dda86d;
}

.user-center-card {
    position: relative;
    bottom: -2rem;
    color: #fff;
    border-radius: var(--radius);
}

.user-center-card-post {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("@/assets/user-center/background.png");
}

.user-center-card-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem 1.5rem 4rem;
}

.user-center-card-icon {
    position: absolute;
    left: 25px;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("@/assets/user-center/user-meta.png");
}

.user-center-card-desc {
    font-weight: bold;
    letter-spacing: 0.25em;
}

.user-center-card-btn {
    min-width: 85px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    border-radius: 4rem;
    color: #fff;
    background: #dda86d linear-gradient(to right, #ebc49b, #dda86d, #ebc49b, #dda86d);
    background-size: 300% 100%;
    transition: all 0.3s ease-in-out;
    border: 0;
}

.user-center-meta-right {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--fqxk-y) * -1);
    margin-right: calc(var(--fqxk-x) * -.5);
}

@media (max-width: 1152px) {
    .user-center-avatar {
        width: 3rem;
        height: 3rem;
    }

    .user-center-meta {
        width: 100%;
    }

    .user-meta-info, .user-meta-id {
        font-size: 0.5rem;
    }

    .user-center-card-inner {
        padding: 1rem 1rem 1rem 3.5rem;
    }

    .user-center-card-btn {
        padding: 0;
        margin-left: 0.125rem;
        text-align: center;
    }
}
</style>
